{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'basic_app/tag_left_user.html' %}
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">APP</h1>
        <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
                <a href="/oratk_app/oratk_most_sessionevent"> <img src="/static/img/database2.jpg" width="200"
                                                                   height="200" class="img-responsive"
                                                                   alt="Generic placeholder thumbnail"> </a>
                <a href="/oratk_app/oratk_most_sessionevent"><h4>Oracle</h4></a>
                <span class="text-muted"> ora运维工具 </span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                <a href="##" target="_blank"> <img src="/static/img/zabbix2.png" width="200" height="200"
                                                   class="img-responsive" alt="Generic placeholder thumbnail"> </a>
                <a href="##" target="_blank"><h4>zabbix</h4></a>
                <span class="text-muted">数据库 监控平台</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                <a href="##" target="_blank"> <img src="/static/img/span.png" width="200" height="200"
                                                   class="img-responsive" alt="Generic placeholder thumbnail"> </a>
                <a href="##" target="_blank"><h4>Archery</h4></a>
                <span class="text-muted">sql 审核查询平台</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                <a href="##"> <img src="/static/img/span.png" width="200" height="200" class="img-responsive"
                                   alt="Generic placeholder thumbnail"> </a>
                <a href="##"><h4>占位</h4></a>
                <span class="text-muted">占位</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                <a href="##"> <img src="/static/img/span.png" width="200" height="200" class="img-responsive"
                                   alt="Generic placeholder thumbnail"> </a>
                <a href="##"><h4>mysql</h4></a>
                <span class="text-muted">ora运维工具</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                <a href="##"> <img src="/static/img/span.png" width="200" height="200" class="img-responsive"
                                   alt="Generic placeholder thumbnail"> </a>
                <a href="##"><h4>PostgreSql</h4></a>
                <span class="text-muted">ora运维工具</span>
            </div>
        </div>
        <h1 class="page-header"></h1>

        <div>
            <div class="table-responsive">
                <form class="navbar-form navbar-left" action="/basic_app/instance_search" role="search" method="post">
                    {#                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"  aria-hidden="true" ></span><a href="/basic_app/user_add"> 添加用户</a></button>#}
                    <div class="form-group">
                        <input type="text" name="user_search" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"
                                                                        aria-hidden="true"></span> 搜索
                    </button>
                    <button type="button" class="btn btn-default" onclick="add_app()"><span
                            class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加应用
                    </button>
                </form>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        {#                    <th>+</th>#}
                        <th>应用名称</th>
                        <th>应用说明</th>
                        <th>应用地址</th>
                        <th>图像</th>
                        <th>来源</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in current_page %}
                        <tr>
                            {#                        <td><input type="checkbox"/></td>#}
                            <td style="display:none">{{ i.id }}</td>
                            <td>{{ i.app_name }}</td>
                            <td>{{ i.app_desc }}</td>
                            <td>{{ i.app_addr }}</td>
                            <td>{{ i.img_addr }}</td>
                            <td>{{ i.source }}</td>
                            <td><a href="/basic_app/instance_edit?nid={{ i.id }}">编辑</a> | <a
                                    href="/basic_app/instance_delete?nid={{ i.id }}">删除</a> | <a
                                    href="/basic_app/instance_lock?nid={{ i.id }}">禁用</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {#        以上是分页#}
                {% include 'basic_app/paginator.html' %}
                {#        以下是分页#}
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="docModalContent" style="width:600px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" onsubmit="return validateForm()">添加应用</h4>
                </div>
                <span>&nbsp</span>
                <form class="form-horizontal" action="/basic_app/add_app" method="post" style="padding-left: 10% "
                      onsubmit="return validateForm()" id="editForm">
                    <div class="form-group" style="display: none">
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-10">
                            <input id="add_app_name" style="width:300px;" type="text" class="form-control"
                                   name="add_app_name" placeholder="oracle">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">说明：</label>
                        <div class="col-sm-10">
                            <input id="add_app_desc"  style="width:300px;" class="form-control"
                                   name="add_app_desc" placeholder="oratk运维工具">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地址：</label>
                        <div class="col-sm-10">
                            <input id="add_app_addr"  style="width:300px;" class="form-control"
                                   name="add_app_addr" placeholder="/oratk_app/">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">图像：</label>
                        <div class="col-sm-10">
                            <input id="add_logo_file" style="width:300px;" type="file" class="form-control"
                                   name="add_logo_file" accept="image/*" placeholder="span.png">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">来源：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width:300px;" name="add_app_source" id="add_app_source">
                                <option>内部</option>
                                <option>三方</option>
                            </select>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="add_app_commit()">提交</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}

{% block script %}
    <script>

        //onclick事件:获取搜索框的值,get方式发送到后台
        //以下为页面刷新时自加载函数
        window.onload = function () {
            //刷新时,自动加载当前每页显示的条目数
            var count_set = document.getElementById("line_count").getAttribute("line_count");
            document.getElementById("line_count").value = count_set
            //刷新时,自动加载搜索框里的内容
            var search = document.getElementById("aa_search").getAttribute("aa_search");

            $('.aa_search').val(search)
        }

        //添加 app
        function add_app() {
            //调用模态框
            $('#myModal').modal('show')
        }

        function add_app_commit() {

            add_app_name = $('#add_app_name').val();
            add_app_desc = $('#add_app_desc').val();
            add_app_addr = $('#add_app_addr').val();
            add_img_file = $('#add_logo_file').val();
            add_app_source = $('#add_app_source').find("option:checked").val();
            let formData = new FormData();
            formData.append('add_app_name', add_app_name);
            formData.append('add_app_desc', add_app_desc);
            formData.append('add_app_addr', add_app_addr);
            formData.append('add_img_addr', add_img_file);
            formData.append('add_app_source', add_app_source);
            $.ajax({
                url: '/basic_app/add_app',
                type: 'POST',
                data: formData,
                processData: false, // 不处理数据( 必须有)
                contentType: false,  //不设置内容类型 ( 必须要)
                success: function (result) {
                    // 上传成功后，处理服务器返回的结果
                    console.log(result)
                    //var result = JSON.parse(result);
                    if (result.status === 'success') {
                        location.reload();
                    } else {
                        var iconType = "error";
                        var title = "新增失败";
                        var message = result.message;
                        let iscancelButton = false;
                        showAlert(title, message, iconType, iscancelButton);  // 弹窗提示
                    }
                },
                error: function (xhr, status, error) {
                    // 如果 AJAX 请求失败，显示错误信息
                    var iconType = "error";
                    var title = "新增失败";
                    var message = "内部错误";
                    let iscancelButton = false;
                    showAlert(title, message, iconType, iscancelButton);  // 弹窗提示
                }
            })
        }
    </script>

{% endblock %}